import React, { PureComponent } from 'react';
import { Link } from 'umi';
import cn from 'classnames';
import { Dropdown, Icon, Menu } from 'antd';
// import { renderTopMenu } from '@/utils/utils';
import helper from '@/utils/auth/helper';
import RightContent from '../GlobalHeader/RightContent';
// import BaseMenu from '../SiderMenu/BaseMenu';
// import { getFlatMenuKeys } from '../SiderMenu/SiderMenuUtils';
import styles from './index.less';
// import BizIcon from '@/components/BizIcon';

export default class TopNavHeader extends PureComponent {
    state = {
        // eslint-disable-next-line react/no-unused-state
        maxWidth: undefined
    };

    static getDerivedStateFromProps(props) {
        return {
            maxWidth: (props.contentWidth === 'Fixed' ? 1200 : window.innerWidth) - 280 - 165 - 40
        };
    }

    handleCompanyChange = async (item, e) => {
        const { firstCompanyCode, dutyCode } = item;
        const {
            chnageCompanyId,
            dispatch
            // route: { routes }
        } = this.props;
        // 注意：规避切换公司没有重新请求权限code的bug
        // helper.inited = false;
        helper.clearAuthRoutes();
        e.preventDefault();

        await dispatch({
            type: 'global/switchCompany',
            payload: {
                firstCompanyCode: dutyCode
            }
        });
        chnageCompanyId(firstCompanyCode);
        sessionStorage.removeItem('orgListTableExpandedRowKeys'); // 清除机构管理的列表展开的状态
    };

    render() {
        const {
            theme,
            contentWidth,
            // menuData,
            logo,
            onGoHome,
            // collapsed,
            // dispatch,
            hideGlobalHeader, // 表示忘记密码页面
            plainLayout
        } = this.props;
        // const { maxWidth } = this.state;
        // const flatMenuKeys = getFlatMenuKeys(menuData);
        const storeUser = localStorage.getItem('user');
        const user = storeUser ? JSON.parse(storeUser) : {};
        const { firstOrgInfo: curCompany = {}, ownOrgList: companys = [] } = user;
        const { firstCompanyCode } = curCompany;
        // const storeCompanys = localStorage.getItem('companys');
        // const companys = storeCompanys ? JSON.parse(storeCompanys) : [];
        // const curCompany =
        //     getType(companys) === 'array' ? companys.find(company => company.id === companyId) : companys;
        const normalLayout = !plainLayout && !hideGlobalHeader;

        if (plainLayout) {
            return (
                <div className={styles.head}>
                    <div className={styles.simpleHeader}>
                        <Link className={styles.simpleLogo} to="/">
                            <img src={logo} alt="logo" />
                            <h1>微微科技</h1>
                        </Link>
                        <div className={styles.simpleMidLine}></div>
                        <div className={styles.simpleCompanyName}>GMS</div>
                        <div className={styles.simpleTabName}>{plainLayout.name}</div>
                    </div>
                </div>
            );
        }

        return (
            <div className={`${styles.head} ${theme === 'light' ? styles.light : ''}`}>
                <div
                    ref={ref => {
                        this.maim = ref;
                    }}
                    className={`${styles.main} ${contentWidth === 'Fixed' ? styles.wide : ''}`}
                >
                    <div className={styles.left}>
                        <div
                            className={cn(styles.logo, {
                                // [styles.co]: collapsed
                            })}
                            key="logo"
                            id="logo"
                            style={{ marginRight: 40 }}
                        >
                            <Link to={normalLayout ? '/' : '/user/login'} onClick={onGoHome}>
                                <img src={logo} alt="logo" />
                                <h1>微微科技</h1>
                                {/* {!collapsed && <h3>集团管理系统</h3>} */}
                            </Link>
                            {normalLayout && (
                                <>
                                    <div className={styles.midLine}></div>
                                    <Dropdown
                                        className={styles.changeCompany}
                                        overlay={
                                            <Menu selectedKeys={firstCompanyCode ? [`${firstCompanyCode}`] : []}>
                                                {companys?.map(item => (
                                                    <Menu.Item eventKey={item.dutyCode} key={item.dutyCode}>
                                                        <a href="#" onClick={e => this.handleCompanyChange(item, e)}>
                                                            {item.dutyAlias}
                                                        </a>
                                                    </Menu.Item>
                                                ))}
                                            </Menu>
                                        }
                                    >
                                        <a
                                            style={{
                                                verticalAlign: 'middle',
                                                fontSize: 16
                                            }}
                                        >
                                            {curCompany && curCompany.dutyAlias}
                                            <Icon type="down" style={{ marginLeft: 9 }} />
                                        </a>
                                    </Dropdown>
                                </>
                            )}
                        </div>
                    </div>
                    {normalLayout && <RightContent {...this.props} />}
                </div>
            </div>
        );
    }
}
